<template>
  <view>
    <view class="lineBottom10 flex-col search-item">
      <text>品牌</text>
      <zxz-uni-data-select
          style="margin: 10rpx 0"
          v-model="brandId"
          dataKey="name"
          dataValue="id"
          :localdata="brandList"
          :clear="true"
          filterable
          placeholder="请选择品牌"
          @change="handleBrand"
      />
    </view>
    <view class="lineBottom10 flex-col search-item">
      <text>车系</text>
      <zxz-uni-data-select
          style="margin: 10rpx 0"
          :disabled="brandId ===''"
          v-model="seriesId"
          dataKey="name"
          dataValue="id"
          :localdata="seriesList"
          :clear="true"
          filterable
          placeholder="请选择车系"
          @change="handleSeries"
      />
    </view>
    <view class="lineBottom10 flex-col search-item">
      <text>车型</text>
      <zxz-uni-data-select
          style="margin: 10rpx 0"
          :disabled="seriesId ===''"
          v-model="modelId"
          dataKey="name"
          dataValue="id"
          :localdata="modelList"
          :clear="true"
          filterable
          placeholder="请选择车型"
          @change="handleModel"
      />
    </view>
  </view>
</template>

<script>
import {getBrandNames, getSeriesName, getModelName,} from "@/api/system/linkageSelect.js";

export default {
  name: 'linkageSelect',
  computed: {},
  watch: {},
  data() {
    return {
      brandList: [],
      seriesList: [],
      modelList: [],
      brandId: '',
      seriesId: '',
      modelId: '',
      brandName: "",
      seriesName: "",
      modelName: "",
    };
  },
  created() {
    this.handleList()
  },
  mounted() {

  },
  methods: {
    handleList() {
      getBrandNames({brandName: ""}).then(res => {
        this.brandList = res
      })
    },

    handleBrand(val) {
      if (val) {
        getSeriesName(val.id).then(res => {
          this.seriesList = res
        })
        this.brandId = val.id
        this.brandName = val.name
      } else {
        this.brandId = ''
        this.brandName = ''
        this.seriesId = ''
        this.seriesName = ''
        this.modelId = ''
        this.modelName = ''
        this.seriesList = []
        this.modelList = []
      }
      this.handleData()
    },

    handleSeries(val) {
      if (val) {
        getModelName(val.id).then(res => {
          this.modelList = res
        })
        this.seriesId = val.id
        this.seriesName = val.name
      } else {
        this.seriesId = ''
        this.seriesName = ''
        this.modelId = ''
        this.modelName = ''
        this.modelList = []
      }
      this.handleData()
    },

    handleModel(val) {
      if (val) {
        this.modelId = val.id
        this.modelName = val.name
      } else {
        this.modelId = ''
        this.modelName = ''
      }
      this.handleData()
    },

    handleData() {
      let obj = {
        brandId: this.brandId,
        seriesId: this.seriesId,
        modelId: this.modelId,
        brandName: this.brandName,
        seriesName: this.seriesName,
        modelName: this.modelName,
      }
      this.$emit('change', obj)
    },

    reset() {
      this.brandId = ''
      this.brandName = ''
      this.seriesId = ''
      this.seriesName = ''
      this.modelId = ''
      this.modelName = ''
    }
  },
};
</script>

<style lang="scss" scoped>
.content-wrap {
  border-radius: 20rpx 20rpx 0 0
}

.search-item {
  padding: 0 20rpx 10rpx
}


</style>


